<template>
<view class="content">
	<view class="box1">
		<view class="mycss-flex-start" style="background-color: #fff;">
			<view class="uni-ma-5">
				<u-button
				type="primary"
				size="mini"
				@click="showDrawer('showLeft')">部门</u-button>
			</view>
			<view class="uni-ma-5 mycss-flex-start">
				<u-button text="日" size="mini" :plain="plains1" :type="showCols1?'primary':'warning'" @click="showTimeCols('dayy')"></u-button>
				<u-button text="周" size="mini" :plain="plains2" :type="showCols2?'primary':'warning'" @click="showTimeCols('weekk')"></u-button>
				<u-button text="月" size="mini" :plain="plains3" :type="showCols3?'primary':'warning'" @click="showTimeCols('mouthh')"></u-button>
			</view>
		</view>
		<uni-easyinput v-model="searchContent" placeholder="请输入查询内容" suffixIcon="search" @iconClick="search"/>
	</view>
	<view class="box2">
		<uni-table border stripe>
			<uni-tr>
				<uni-td align="center">
					<view>
						姓名
					</view>
				</uni-td>
				<uni-td align="center" style="padding: right 10ch;">
					<view>
						账户
					</view>
				</uni-td>
				<uni-td align="center">
					<view>
						出勤率
					</view>
				</uni-td>
				<uni-td align="center">
					<view>
						缺勤率
					</view>
				</uni-td>
				<uni-td align="center" v-if="days">
					<view>
						出勤天数
					</view>
				</uni-td>
				<uni-td align="center" v-if="days">
					<view>
						缺勤天数
					</view>
				</uni-td>
				<uni-td align="center">
					<view>
						操作
					</view>
				</uni-td>
			</uni-tr>
			<uni-tr v-for="(item,index) in list.tableData" :key="index">
				<uni-td align="center">
					<view>
						{{item.name}}
					</view>
				</uni-td>
				<uni-td align="center" style="padding: right 10ch;">
					<view>
						{{item.account}}
					</view>
				</uni-td>
				<uni-td align="center">
					<view>
						{{item.attendanceRace}}
					</view>
				</uni-td>
				<uni-td align="center">
					<view>
						{{item.absenceRace}}
					</view>
				</uni-td>
				<uni-td align="center" v-if="days">
					<view>
						{{item.absenceDays}}
					</view>
				</uni-td>
				<uni-td align="center" v-if="days">
					<view>
						{{item.attendanceDays}}
					</view>
				</uni-td>
				<uni-td align="center">
					<view>
						<u-button text="个人计划" size="mini" type="primary" @click="goPersonalPlan(list.tableData,item,index)"></u-button>
					</view>
				</uni-td>
			</uni-tr>
		</uni-table>
		<uni-pagination title="标题文字" :value="current" :total="list.total" :pageSize="list.pageSize"
			@change="pageChange"></uni-pagination>
	</view>
</view>
<uni-drawer ref="showLeft" mode="left" :mask-click="false" @change="change($event,'showLeft')">
	<view class="scroll-view">
			<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="myflex">
							<button type="warn" size="mini" @click="closeDrawer('showLeft')">关闭</button>
					</view>
					<view>
						<uni-easyinput v-model="searchContent" placeholder="请输入部门名称"/>
					</view>
					<view class="info-content">
						<DaTree
						ref="DaTreeRef"	
						:data="roomTreeData"
						defaultExpandAll
						showCheckbox
						labelField="name"
						valueField="id"
						@change="handleTreeChange"
						></DaTree>
					</view>
			</scroll-view>
	</view>
</uni-drawer>
</template>
<script>
	import { defineComponent, reactive, ref,inject,onMounted, } from 'vue'
	import DaTree from '@/components/da-tree/index.vue'
	export default defineComponent({
		components: { DaTree },
		setup() {
			const DaTreeRef = ref()
			const showLeft = ref(false)
			const showCols1 = ref(true)
			const showCols2 = ref(false)
			const showCols3 = ref(false)
			const days=ref(false)
			const plains1=ref(false)
			const plains2=ref(true)
			const plains3=ref(true)
			const searchContent=ref('')
			const allsubmitkeys = ref([]);
			const http = inject("$http");
			// 默认页数
			const current = ref(1);
			// 查询数据		
			const query = reactive({
				id:"",
				name: "",
				type:0,
				page: 1,
				size: 10,
			})
			// 缓存数据
			const list = reactive({
				tableData: [],
				total: 0,
				pageSize:10
			})
			const roomTreeData = ref([]);
			// 初始数据缓存
			onMounted(() => {
				getData(),
				getAlls()
			})
			function handleTreeChange(allSelectedKeys, currentItem) {
			  allsubmitkeys.value = allSelectedKeys;
			  console.log('handleTreeChange ==>', allSelectedKeys)
			  console.log(currentItem);
			  
			  if(allSelectedKeys==""){
				  query.id=""
			  }
			  else{query.id=allSelectedKeys+","}
			  getData()
			}
			// 打开窗口
			function showDrawer(e) {
				this.$refs[e].open()
			}
			// 关闭窗口
			function closeDrawer(e) {
				this.$refs[e].close()
			}
			// 窗口提示
			function change(e, type) {
				console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
				console.log(list.alls);
			}
			// 获取数据
			function getData() {
				http.post("/zrSupervision/table", query).then((res) => {
					list.tableData = res.data.rows
					list.total=res.data.total
				})
			}
			// 获取部门数据
			function getAlls(){
				http.post("/depart/getAll").then((res) => {
					if (res && res.data && res.data.code == 1) {
						roomTreeData.value = res.data.data;
					}
				})
			}
			// 翻页
			function pageChange(e) {
				current.value = e.current;
				query.page = e.current;
				getData();
			}
			// 根据搜索条件搜索
			function search() {
				query.name = searchContent.value;
				console.log(searchContent.value);
				query.page = 1;
				getData()
			}
			// 跳转个人计划
			function goPersonalPlan( obj,item, index) {
				let indexs= index + ((query.page - 1) * list.pageSize)
				uni.navigateTo({
					url: "/pages/all-plan/show-personal-plan",
					success: (res) => {
						uni.$emit("allplansend",  obj, item, indexs);
					}
				});
				console.log(index);
				console.log(query.page);
				console.log(list.pageSize);
				console.log(indexs);
			}
			function showTimeCols(e) {
				if(e=="dayy"){
					showCols1.value = true;
					showCols2.value = false;
					showCols3.value = false;
					plains1.value = false;
					plains2.value = true;
					plains3.value = true;
					days.value=false;
					query.type=0;
					getData()
				}
				else if(e=="weekk"){
					showCols1.value = false;
					showCols2.value = true;
					showCols3.value = false;
					plains1.value = true;
					plains2.value = false;
					plains3.value = true;
					days.value=true;
					query.type=1;
					getData()
				}
				else{
					showCols1.value = false;
					showCols2.value = false;
					showCols3.value = true;
					plains1.value = true;
					plains2.value = true;
					plains3.value = false;
					days.value=true;
					query.type=2;
					getData()
				}
			}
			return{
				DaTree,
				showDrawer,
				closeDrawer,
				change,
				pageChange,
				http,
				getData,
				getAlls,
				query,
				list,
				current,
				search,
				goPersonalPlan,
				showCols1,
				showCols2,
				showCols3,
				showTimeCols,
				searchContent,
				days,
				plains1,
				plains2,
				plains3,
				roomTreeData,
				handleTreeChange,
				allsubmitkeys
			}
		}
	})
</script>

<style>
	.content{
	  display: flex;
	  flex-direction: column
	  }
	.box1{
		height: 20%;
		background-color: aliceblue;
	}
	.box2{
		height: 80%;
	}
</style>